import React from 'react';
import {
    Modal, Col,
    Button, Icon
} from 'antd';
import Base from '../base';

export default class Hello extends Base {
    init() {
        this.data = 'hello';
    }

    reload(delta) {
        if (delta) {
            this.props.mutations.setHello({delta}).then(({errors, data}) => {
                if (errors) {
                    Modal.error({
                        title: '错误',
                        content: this.error(errors)
                    });
                } else {
                    // TODO 如何用data直接更新?
                    this.props.data.refetch();
                }
            });
        } else {
            this.props.data.refetch();
        }
    }

    view(props) {
        const {text, index = '', loading = false} = props;
        return (
            <Col span="8" className="center">
                <Button.Group size="large">
                    <Button
                        type="primary"
                        onClick={this.reload.bind(this, -1)}
                    >
                        <Icon type="left"/>
                    </Button>
                    <Button
                        type="primary" loading={loading}
                        onClick={this.reload.bind(this, 0)}
                    >
                        {text} {index}
                    </Button>
                    <Button
                        type="primary"
                        onClick={this.reload.bind(this, 1)}
                    >
                        <Icon type="right"/>
                    </Button>
                </Button.Group>
            </Col>
        );
    }

    busy() {
        let text = 'loading';
        const {hello} = this.props.data;
        if (hello) {
            text = hello.text;
        }
        return this.view({
            loading: true,
            text
        });
    }

    done(data) {
        return this.view(data);
    }
}
